<template>
    <div class='formLayout card' :class="formClass">
        <el-row style="width: calc(100% - 230px);">
            <el-row class="base-form" style="width: 100%;">
                <el-col v-for="i in baseFormKeyList.length" :key="i" :span="calcSpan(i, baseFormKeyList)"
                    style="margin-bottom: 8px;">
                    <template v-for="span in spanList" :key="span">
                        <slot v-if="$slots['baseForm' + i + '_' + span]" :name="'baseForm' + i + '_' + span"></slot>
                    </template>
                </el-col>
            </el-row>
            <el-row class="high-form" v-show="isExpand" style="width: 100%;">
                <el-col v-for="i in highFormKeyList.length" :key="i" :span="calcSpan(i, highFormKeyList)"
                    style="margin-bottom: 8px;">
                    <template v-for="span in spanList" :key="span">
                        <slot v-if="$slots['highForm' + i + '_' + span]" :name="'highForm' + i + '_' + span"></slot>
                    </template>
                </el-col>
            </el-row>
        </el-row>
        <el-row style="width: 230px; height: 35px;" type="flex" justify="end">
            <el-row style="width: 100%;">
                <el-col :span="9">
                    <el-button class="g-button" @click="emits('query')" icon="Search">查询</el-button>
                </el-col>
                <el-col :span="9">
                    <el-button class="g-button" @click="emits('rest')" icon="Delete" v-if="restButtonShow">重置</el-button>
                </el-col>
                <el-col :span="6" v-if="expandButtonShow" class="expandButtonShow">
                    <div class="expand" v-if="!isExpand" @click="isExpand = true">
                        <span style="font-size: 12px;">展开</span>
                        <el-icon :size="12" class="form-icon">
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <div class="expand" v-else @click="isExpand = false">
                        <span style="font-size: 12px;">收起</span>
                        <el-icon :size="12" class="form-icon">
                            <ArrowUp />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </el-row>
    </div>
    <div class="table card" :style="{ height: tableHeight }">
        <slot name="table"></slot>
    </div>
</template>

<script setup>
/**
 * form布局组件
 * 
 */
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue'
const props = defineProps({
    spanList: {
        type: Array,
        default: () => [4, 8, 12, 16, 20, 24]
    },
    restButtonShow: {
        type: Boolean,
        default: true
    },
    expandButtonShow: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(['query', 'rest'])
const inst = getCurrentInstance()
const slots = inst.slots
const slotKeyList = Object.keys(slots)
const baseFormKeyList = ref([])
const highFormKeyList = ref([])
const handlebaseForm = () => {
    slotKeyList.forEach((slot, index) => {
        if (slot.indexOf('baseForm') !== -1) {
            baseFormKeyList.value.push(slot)
        }
        if (slot.indexOf('highForm') !== -1) {
            highFormKeyList.value.push(slot)
        }
    })
}
const calcSpan = (i, slotKeyList) => {
    const key = slotKeyList.find((item, index) => index + 1 === i)
    return key ? Number(key.split('_')[1]) : 8
}
const isExpand = ref(false)
onMounted(() => {
    handlebaseForm()
    calcHeight()
})
/* 监听dom元素高度变化 */
const formClass = 'form' + new Date().getTime() // 动态类名,防止多个表格监听同一个dom
const tableHeight = ref()
let observer
const calcHeight = () => {
    nextTick(() => {
        const form = document.querySelector(`.${formClass}`)
        observer = new ResizeObserver((e) => {
            console.log(e[0]);
            tableHeight.value = `calc(100% - ${e[0].target.offsetHeight + 10}px)`
        })
        observer.observe(form)
    })
}
onUnmounted(() => {
    observer.disconnect()
})
</script>
    
<style scoped>

.formLayout {
    display: flex;
    margin-bottom: 10px;
}

.expand {
    cursor: pointer;
}

.expand>span,
.expand>.el-icon {
    color: var(--isActive-color);
}

.expandButtonShow {
    height: 32px;
    padding: 8px 8px;
    display: flex;
    align-items: center;
}
</style>